<!DOCTYPE html>
<html>
	<head>
		    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="jquery.fullPage.min.js" ></script>
<link rel="stylesheet" href="jquery.fullPage.min.css" />




		<title>fullpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<style type="text/css">
	* { word-wrap: break-word; }
	body {font: 16px/1.8 "Microsoft Yahei",verdana}
	body, input, button, select, textarea { color: #fff;}
		textarea { resize: none; }
	body, ul, ol, li, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset, .pr, .pc { margin: 0; padding: 0; }
	table { empty-cells: show; border-collapse: collapse; }
		caption, th { text-align: left; font-weight: 400; }
	ul li, .xl li { list-style: none; }
	h1, h2, h3, h4, h5, h6 { font-size: 1em; }
	em, cite, i { font-style: normal; }
	a { color:#fff; text-decoration: none; }
		a:hover { text-decoration: underline; }
		a img { border: none; }
	label { cursor: pointer; }
	.z {float: left!important;}
	.y {float: right!important;}
	
.section {font-size: 12px; text-align: center;}

#fp-nav ul li a span, .fp-slidesNav ul li a span {background: none;}

#fp-nav ul li, .fp-slidesNav ul li {  margin: 0px; width: 25px; height: 25px;}
#fp-nav ul li a, .fp-slidesNav ul li a { padding: 0px; background: url(img/dot.png) no-repeat 100% -25%;}
#fp-nav ul li a.active, .fp-slidesNav ul li a.active {background: url(img/dot.png) no-repeat 0px -25px;}

.fp-controlArrow.fp-prev { left: 50px;}
.fp-controlArrow.fp-next {right: 50px;}

.section1 {background:#000 url(img/section1.jpg) no-repeat 50% 100%; overflow:hidden}
.section1 .t1 { height: 26px; width: 375px; background: url(img/logo.png) no-repeat; position: absolute; left: 50%; top: 25px; margin-left: -187px;}
.section1 .t1 a {display: block; float: left; width: 33.3%; height: 26px; text-indent: -9999px;}
.section1 .t2 { position: absolute; top: 25%; left: 50%; width: 554px; margin-left: -277px;}
.section1 .t2 h1 {font-size: 88px; transform: scale(0.5, 0.5);transition-duration:0.8s; transition-delay:0.1s;font-weight: normal;}
.section1 .t2 h2 {font-size: 48px; transform: scale(0.5, 0.5);transition-duration:0.8s; transition-delay:0.1s;font-weight: normal;}
.section1 .t3 {position: absolute; top: 55%; left: 50%; width: 500px; margin-left: -250px; font-size: 14px; color: #94a7c6; opacity:0;transition-duration:0.1s;transition-delay:0.1s;}
	.section1.active .t2 h1, .section1.active .t2 h2 {transform: scale(1, 1);transition-duration:1.5s;transition-delay:0.1s;}
	.section1.active .t3 {opacity:1;transition-duration:1s;transition-delay:2s}

.section1 .bg1 {background: url(img/bg11.png) no-repeat 50% 100%; width:100%; height:850px; position:absolute; bottom:0;}
.section1 .bg2 {background: url(img/bg12.png) no-repeat 50% 0%; width:100%; height:392px; position:absolute;bottom: -397px; transition-duration:1s; transition-delay:0.2s;}
.section1 .bg3 {background: url(img/bg13.png) no-repeat 50% 0%; width:100%; height:392px; position:absolute;bottom: -397px; transition-duration:1s; transition-delay:0.2s;}
	.section1.active .bg2 { bottom: 90px;transition-duration:2s; transition-delay:0.2s;}
	.section1.active .bg3 { bottom: 0px; transition-duration:1s; transition-delay:0.2s;}


.section2 {background:#8ab7d4 url(img/section2.jpg) repeat-x 50% 100%}
.section2 .t1 { height:45px ; line-height: 45px; width: 510px; position: absolute; top: 15%; left: 50%; margin-left: -255px; color: #748A9E; font-size: 28px; text-align: left; opacity:0;transform: scale(0.5, 0.5); ;transition-duration:300ms;}
.section2 .t2 {height: 45px; background: url(img/t2.png) no-repeat 0 0;width: 510px; position: absolute; top: 23%; left: 50%; margin-left: -255px; opacity:0;transform: scale(0.5, 0.5); ;transition-duration:0.5s;transition-delay:0.8s}
.section2 .t3 {height: 80px; line-height: 28px; width: 510px; position: absolute; top:33%; left: 50%; margin-left: -255px; color: #727F8C; font-size: 16px; text-align: left;transition-duration:0.5s;transition-delay:0.8s; opacity: 0}
	.section2.active .t1, .section2.active .t2 {transform: scale(1, 1); opacity:1;transition-duration:0.7s;transition-delay:0.2s;}
	.section2.active .t3 { opacity: 1;transition-duration:1.5s}

.section2 .bg1, .section2 .bg2, .section2 .bg3 { width: 800px; height: 250px; position: absolute; top: 50%; left: 50%; transition-duration:0.5s;transition-delay:0.1s;opacity: 0;}
.section2 .bg1 {background:url(img/bg21.png) no-repeat 0 0 ; margin-left: -850px;}
.section2 .bg2 {background:url(img/bg23.png) no-repeat 0 0 ; margin-left: -400px; margin-top: 500px;}
.section2 .bg3 {background:url(img/bg22.png) no-repeat 0 0 ; margin-left: 640px;}
	.section2.active .bg1, .section2.active .bg2, .section2.active .bg3 {transition-duration:0.5s;transition-delay:0.1s;opacity: 1;}
	.section2.active .bg1 { margin-left: -600px; }
	.section2.active .bg2 { height: 400px; margin-top: 0;}
	.section2.active .bg3 { margin-left: 320px; }

.section3 {background:#2b322b url(img/section3.jpg) no-repeat 50% 100%;}
.section3 .t1 { height:45px ; line-height: 45px; width: 510px; position: absolute; top: 15%; left: 50%; margin-left: -255px;font-size: 28px; text-align: left;transform: scale(0.5, 0.5); color: #748A9E;}
.section3 .t2 {height: 45px; background: url(img/t3.png) no-repeat 0 0;width: 510px; position: absolute; top: 23%; left: 50%; margin-left: -255px; opacity:0;transform: scale(0.5, 0.5); transition-duration:0.7s;transition-delay:0.2s;}
.section3 .t3 {width: 430px; font-size: 16px; color: #FFFDE1; position: absolute; top: 45%; left: 50%; margin-left: -480px;}
	.section3.active .t1, .section3.active .t2 {opacity: 1;transform: scale(1, 1);transition-duration:0.7s;transition-delay:0.2s;}
</style>
<body>

<div id="fullpage">
    <div class="section section1">
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
        <div class="t1">
        <a href="">126</a>
    	<a href="">163</a>
    	<a href="">yeah</a>
        </div>
        <div class="t2">
        	<h1>网易邮箱6.0</h1>
        	<h2>不变，网易邮箱</h2>
        </div>
        <div class="t3">
网易邮箱6.0版2014年最具创意气质的重量级新邮箱，重生光华，为之瞩目。唯美
的视觉设计和视觉化交互，无可替代的独创动态情景皮肤，多项国内创意产品专利技术，
成就无与伦比的出众品味，无可比拟的美妙体验。
        </div>
    </div>
    <div class="section section2">
    	<div class="slide" style="position: relative;">
    		<div class="bg1"></div>
    		<div class="bg2"></div>
    		<div class="bg3"></div>
    		<div class="t1">[ 视觉·简 ]</div>
    		<div class="t2"></div>
    		<div class="t3">秉承网易邮箱经典的清新简洁的设计风格，邮箱 6.0 版带来全新一代的设计理念，更追求极致唯美的视觉设计、传承更多人文和艺术底蕴，华丽蜕变，带来更舒服更爽心悦目的视觉享受。</div>
    		<div class="t4"></div>
    		<div class="t5"></div>
    	</div>
    	<div class="slide">section-2</div>
    	<div class="slide">section-3</div>
    	<div class="slide">section-4</div>
    </div>
    <div class="section section3">
    		<div class="t1">[ 视觉化交互设计 ]</div>
    		<div class="t2"></div>
    		<div class="t3">邮箱 6.0 版采用了全新的视觉化交互设计，通过对界面的整体风格设计、重要信息的视觉化处理以及元素本身的视觉传达优化，来实现产品流程设计和交互行为塑造。从视觉的角度出发，让用户无需多想，直接通过感官与产品进行交互。</div>
    </div>
    <div class="section section4">Some section4</div>
</div>
<script type="text/javascript" src="move.min.js" ></script>

<script type="text/javascript">

$(document).ready(function() {
    $('#fullpage').fullpage({
        verticalCentered: false,
        css3: true,
        anchors:['page1', 'page2', 'page3', 'page4'],
        navigation: true,	
        animateAnchor: false, 
        scrollingSpeed:1000,

    });
});


</script>

</body>
</html>

